<template>
  <view class="page flex-col">
    <view class="block_2 flex-col">
      <image :src="constants.experiment?.thumb_url"/>
    </view>
    <view class="block_3 flex-col">
      <view class="group_3 flex-col">{{constants.name}}</view>
      <image
        class="image_8"
        referrerpolicy="no-referrer"
        v-if="state == 'finished'"
        src="./imgs/finish.png"
      />
      <image
        class="image_8"
        referrerpolicy="no-referrer"
        v-if="state == 'notFinished'"
        src="./imgs/notFinish.png"
      />
      <view class="block_5 flex-row justify-between">
        <view class="image-text_5 flex-row justify-between">
          <image
            class="thumbnail_5"
            referrerpolicy="no-referrer"
            src="./imgs/ava.png"
          />
          <text class="text-group_1">良益科技</text>
        </view>
        <view class="thumbnail_16"></view>
        <text class="text_4">{{constants.begin_date}}~{{constants.end_date}}</text>
      </view>
    </view>
    <view class="box_6 flex-col" v-if="state == 'finished'">
      <view class="box_7 flex-row justify-between">
        <text class="text_5">{{constants.homework_report_for_current_student?.report_score?.finnal_score || '无'}}</text>
        <view class="text-wrapper_2 flex-col">
          <text class="text_6">教师评语</text>
          <text class="text_7">
            {{ constants.homework_report_for_current_student?.report_score?.brief  || '无'}}
          </text>
        </view>
      </view>
      <view class="box_8 flex-col"></view>
      <view class="text-wrapper_3 flex-row justify-between">
        <text class="text_8">完成时间：</text>
        <text class="text_9">{{ constants.updated }}</text>
      </view>
      <text class="text_10">实验报告</text>
      <view class="box_9 flex-row" v-for="(item, index) in constants.report_list_for_current_student" :key="index">
        <view class="image-text_2 flex-row justify-between">
          <image
              class="label_1"
              referrerpolicy="no-referrer"
              src="./imgs/file-icon.png"
          />
          <view class="text-group_2 flex-col">
            <text class="text_11">{{ constants.experiment.name }}</text>
            <text class="text_12">{{item.updated}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="block_4 flex-col" v-if="state == 'notFinished'">
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">实验目的</text>
      </view>
      <text class="text_6" v-html="constants.experiment.objective">
      </text>
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">实验仪器和器材</text>
      </view>
      <text class="text_6" v-html="constants.experiment.instrument_equipment">
      </text>
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">实验原理</text>
      </view>
      <text class="text_6" v-html="constants.experiment.principle">
      </text>
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">实验步骤</text>
      </view>
      <text class="text_6" v-html="constants.experiment.steps">
      </text>
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">数据记录</text>
      </view>
      <text class="text_6" v-html="constants.experiment.data_records">
      </text>
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">数据记录</text>
      </view>
      <text class="text_6" v-html="constants.experiment.data_records">
      </text>
      <view class="box_4 flex-row justify-start">
        <view class="section_1 flex-col"></view>
        <text class="text_5">误差分析</text>
      </view>
      <text class="text_6" v-html="constants.experiment.error_analysis">
      </text>

    </view>
    <bottomBackBtn></bottomBackBtn>
  </view>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
      homework_id: '',
      state: '',
    };
  },
  async onLoad(option) {
    this.homework_id = option.homework_id
    this.handleGetDetail()
  },
  methods: {
    async handleGetDetail(){
      let param = {
        homework_id: this.homework_id,
      }
      let res = await this.API.HomeworkFetchModel(param)
      console.log('rrrrrr',res)
      this.constants = res
      if(res.homework_report_for_current_student){
        this.state = 'finished'
      } else {
        this.state = 'notFinished'
      }
      // objective: "", //实验目的
      // instrument_equipment: "", //实验仪器和器材
      // principle: "", //实验原理
      // steps: "", //实验步骤
      // data_records: "", //数据记录
      // result: "", //实验结果
      // error_analysis: "", //误差分析
    },
    goBack(){
      uni.navigateBack({
        delta: 1
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  .block_2 {
    background-color: rgba(216, 216, 216, 0.3);
    width: 750rpx;
    height: 384rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .block_3 {
    background-color: rgba(255, 255, 255, 1);
    padding: 12rpx 32rpx 24rpx 32rpx;
    .image_8 {
      width: 140rpx;
      height: 112rpx;
      margin-left: 546rpx;
    }
    .group_3 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      width: 686rpx;
      height: 2rpx;
      margin-top: 10rpx;
    }
    .block_5 {
      //width: 100%;
      margin-top: 5rpx;
      padding: 24rpx 0 0rpx 0;
      border-top: 1rpx solid #E6EBF1;
      align-items: center;
      .image-text_5 {
        width: 112rpx;
        .thumbnail_5 {
          width: 32rpx;
          height: 32rpx;
        }
        .text-group_1 {
          overflow-wrap: break-word;
          color: rgba(140, 140, 140, 1);
          font-size: 24rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 32rpx;
        }
      }
      .thumbnail_16 {
        width: 2rpx;
        height: 16rpx;
        background: #E6EBF1;
      }
      .text_4 {
        overflow-wrap: break-word;
        color: rgba(140, 140, 140, 1);
        font-size: 24rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 32rpx;
      }
    }
  }
  .block_4 {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 16rpx;
    padding-top: 32rpx;
    flex: 1;
    padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
    overflow-y: scroll;
    .box_4 {
      width: 244rpx;
      margin-right: 606rpx;
      .section_1 {
        background-color: rgba(39, 118, 255, 1);
        width: 8rpx;
        height: 24rpx;
        margin: 8rpx 10rpx 8rpx 0;
      }
      .text_5 {
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 28rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 40rpx;
      }
    }
    .text_6 {
      width: 686rpx;
      overflow-wrap: break-word;
      color: rgba(38, 38, 38, 1);
      font-size: 28rpx;
      font-weight: normal;
      text-align: justify;
      line-height: 40rpx;
      align-self: center;
      margin-top: 16rpx;
    }
  }
  .box_6 {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 16rpx;
    padding-top: 32rpx;

    flex: 1;
    padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
    overflow-y: scroll;
  }

  .box_7 {
    width: 686rpx;
    align-self: center;
  }

  .text_5 {
    text-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 64rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 76rpx;
    margin-right: 10rpx;
  }

  .text-wrapper_2 {
  }

  .text_6 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-right: 466rpx;
  }

  .text_7 {
    width: 578rpx;
    height: 160rpx;
    overflow-wrap: break-word;
    color: rgba(89, 89, 89, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: justify;
    line-height: 40rpx;
    margin-top: 16rpx;
  }

  .box_8 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    width: 686rpx;
    height: 2rpx;
    align-self: center;
    margin-top: 30rpx;
  }

  .text-wrapper_3 {
    width: 382rpx;
    margin: 24rpx 336rpx 0 32rpx;
    align-items: center;
  }

  .text_8 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
  }

  .text_9 {
    overflow-wrap: break-word;
    color: rgba(89, 89, 89, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 32rpx;
    margin-top: 2rpx;
  }

  .text_10 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 24rpx 606rpx 0 32rpx;
  }

  .box_9 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    width: 686rpx;
    border: 1px solid rgba(230, 235, 241, 1);
    align-self: center;
    margin-top: 16rpx;
    padding: 22rpx 150rpx 22rpx 22rpx;
  }

  .image-text_2 {
    width: 510rpx;
  }

  .label_1 {
    width: 92rpx;
    height: 92rpx;
  }

  .text-group_2 {
    margin: 4rpx 0 4rpx 0;
  }

  .text_11 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-right: 226rpx;
  }

  .text_12 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 4rpx;
  }

  .box_10 {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 190rpx;
    padding: 26rpx 32rpx 18rpx 32rpx;
  }

  .block_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6px;
    border: 1px solid rgba(230, 235, 241, 1);
    padding: 20rpx 282rpx 20rpx 284rpx;
  }

  .image-text_3 {
    width: 116rpx;
  }

  .thumbnail_7 {
    width: 40rpx;
    height: 40rpx;
    margin: 4rpx 0 4rpx 0;
  }

  .text-group_3 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 34rpx;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 48rpx;
  }

  .image_3 {
    width: 268rpx;
    height: 10rpx;
    align-self: center;
    margin-top: 66rpx;
  }

  .box_2 {
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 66rpx;
    padding: 26rpx 32rpx 18rpx 32rpx;
    .group_5 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 6px;
      border: 1px solid rgba(230, 235, 241, 1);
      padding: 20rpx 282rpx 20rpx 284rpx;
      .image-text_6 {
        width: 116rpx;
        .thumbnail_17 {
          width: 40rpx;
          height: 40rpx;
          margin: 4rpx 0 4rpx 0;
        }
        .text-group_2 {
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 34rpx;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 48rpx;
        }
      }
    }
    .image_9 {
      width: 268rpx;
      height: 10rpx;
      align-self: center;
      margin-top: 66rpx;
    }
  }
}

</style>
